<template>
  <div 
    class="csg-switch" 
    :class="{ 'is-active': modelValue }"
    @click="toggleSwitch"
  >
    <div class="csg-switch__track"></div>
    <div class="csg-switch__thumb"></div>
    <input 
      type="checkbox" 
      v-model="modelValue" 
      class="csg-switch__input" 
      @change="$emit('update:modelValue', modelValue)"
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({

});

const modelValue = ref(true);

const emit = defineEmits(['update:modelValue']);

const toggleSwitch = () => {
//   emit('update:modelValue', !props.modelValue);
};
</script>

<style lang="scss" scoped>
.csg-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  transition: all 0.3s ease;

  &__track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dcdfe6;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  &__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

  &__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
  }

  &.is-active {
    .csg-switch__track {
      background-color: #409eff;
    }

    .csg-switch__thumb {
      transform: translateX(20px);
    }
  }
}
</style>